<template>
  <div>
    <h1>ref="reference"</h1>
    {{ count }} - {{ str }} -- {{ flag }} -- {{ arr }}
    <button @click="getData">获取数据</button>
  </div>
</template>

<script lang="ts">
import Vue, { reactive, ref } from 'vue'
export default {
  setup () {
    // 接受一个参数值并返回一个响应式且可改变的 ref 对象。
    // ref 对象拥有一个指向内部值的单一属性 .value。
    // 初始化对象
    const count = ref(100)
    const str = ref('hello')
    const flag = ref(true)
    const arr = ref(['a', 'b', 'c', 'd'])

    const getData = () => {
      console.log(count.value)
      console.log(str.value)
      console.log(flag.value)
      console.log(arr.value)
    }
    return {
      count,
      str,
      flag,
      arr,
      getData
    }
  }
}
</script>
